# flip

`flip(){:js}` changes the placement of the floating element to
the opposite one by default in order to keep it in view.

<div className="flex flex-col gap-4">
  <Chrome
    label="Scroll the container"
    center
    scrollable
    className="h-96"
  >
    <Floating middleware={[{name: 'flip'}]}>
      <div className="grid place-items-center w-32 h-32 border-2 border-gray-1000 border-dashed" />
    </Floating>
  </Chrome>
</div>

It also has the ability to flip to _any_ placement, not just the
opposite one.

## Usage

```js
import {computePosition, flip} from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});
```

> This cannot be used with `autoPlacement(){:js}`.

## Options

These are the options you can pass to `flip(){:js}`.

```ts
interface Options extends DetectOverflowOptions {
  mainAxis?: boolean;
  crossAxis?: boolean;
  fallbackPlacements?: Array<Placement>;
  fallbackStrategy?: 'bestFit' | 'initialPlacement';
  flipAlignment?: boolean;
}
```

### mainAxis

default: `true{:js}`

This is the main axis in which overflow is checked to perform a
flip.

- `y`-axis for `'top'{:js}` and `'bottom'{:js}` placements
- `x`-axis for `'left'{:js}` and `'right'{:js}` placements

```js
flip({mainAxis: false});
```

### crossAxis

default: `true{:js}`

This is the cross axis in which overflow is checked to perform a
flip, the opposite axis of `mainAxis{:.objectKey}`.

```js
flip({crossAxis: false});
```

### fallbackPlacements

default: `[oppositePlacement]{:js}`

This describes the array of placements to try if the preferred
`placement{:.objectKey}` doesn't fully fit on the axes in which
overflow is checked (both by default).

```js
flip({
  fallbackPlacements: ['right', 'bottom'],
});
```

If the `placement{:.objectKey}` in `computePosition(){:js}` is
set to `'top'{:js}`, but that doesn't fit, then `'right'{:js}`
will be used instead. If `'right'{:js}` also doesn't fit, then
`'bottom'{:js}` will be used. If none of these fit, then the
best-fitting placement will be used.

### fallbackStrategy

default: `'bestFit'{:js}`

When no placements fit, then you'll want to decide what happens.
`'bestFit'{:js}` will use the placement which fits best on the
checked axes. `'initialPlacement'{:js}` will use the initial
`placement{:.objectKey}` specified.

```js
flip({
  fallbackStrategy: 'initialPlacement',
});
```

### flipAlignment

default: `true{:js}`

When an alignment is specified, e.g. `'top-start'{:js}` instead
of just `'top'{:js}`, this will flip to `'top-end'{:js}` if
`start{:.string}` doesn't fit.

```js
flip({flipAlignment: false});
```

When using this with the `shift(){:js}` middleware, ensure
`flip(){:js}` is placed **before** `shift(){:js}` in your
middleware array. This ensures the `flipAlignment{:.objectKey}`
logic can act before shift's does.

### ...detectOverflowOptions

All of [detectOverflow](/docs/detectOverflow#options)'s options
can be passed. For instance:

```js
flip({padding: 5}); // 0 by default
```
